<template>
  <div>

    <!--    题库数据面板-->
    <!--    <el-dialog title="题库" :visible.sync="dialogTiKuVisible" width="80%" :modal="true">-->
    <!--      <upload-excel-component :on-success="handleSuccessExcel" :before-upload="beforeUploadExcel" />-->
    <el-upload
      ref="uploadExcel"
      :action="pathUploadExcel"
      :data="tapeData"
      :limit="1"
      :auto-upload="false"
      accept=".xlsx"
      :on-success="handleOnSuccess"
      list-type="text"
    >
      <!--    <input slot="trigger" ref="excel-upload-input" classmgt="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">-->
      <!--      <input slot="trigger" ref="excel-upload-input" classmgt="excel-upload-input" type="file" accept=".xlsx, .xls" v-model="inputVal">-->
      <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
        Drop excel file here or click
        <!--                <el-button classmgt="inline-block":loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">-->
        <!--                  Click-->
        <!--                </el-button>-->
      </div>

    </el-upload>
    <!--    <el-button :loading="loading" style="float:right;margin-bottom:16px;" size="mini" type="primary" @click="handleUpload">上传-->
    <!--    </el-button>-->
    <el-button class="filter-item" type="warning" @click="handleUpload">导入<i class="el-icon-upload2 el-icon--right"></i>
    </el-button>
    <a :href="downloadExcel">
      <el-button class="filter-item" type="warning" @click="handleDownload">导出<i
        class="el-icon-download el-icon--right"></i></el-button>
    </a>


    <!--      <uploadfile :on-change="handleSuccessExcel"  :before-upload="beforeUploadExcel" />-->
    <!--      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:5px;">-->
    <!--        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />-->
    <!--      </el-table>-->
    <!--    </el-dialog>-->

  </div>
</template>

<script>
  import XLSX from 'xlsx'
  import { parseTime } from '@/utils'

  export default {
    props: {
      // beforeUpload: Function, // eslint-disable-line
      // onSuccess: Function,// eslint-disable-line
      // onchange: Function,
      // tableData:Array,
      // tableHeader: Array,
      //----20201027-----
      tapeData: {}

    },
    data() {
      return {

        pathUploadExcel: 'http://localhost:8180/act/excel',
        loading: false,
        excelData: {
          header: null,
          results: null
        },
        inputVal: '',
        tableData: [],
        tableHeader: [],

        downloadExcel: 'javascript:void(0)'

      }
    },
    computed: {
      // pathUploadExcel(){
      //   return this.pathUploadExcel
      // },
      // tapeData(){
      //   let _tapaDate={
      //     actid:"",
      //     name:"",
      //     codename:"excel",
      //     url:"",
      //     auther:"cxy",
      //     excelurl:"",
      //     modifytime:"",
      //     platform:""
      //   }
      // }

    },

    methods: {
      handleOnSuccess(response, file, fileList) {
        this.inputVal = response.data
        console.log('handleOnSuccess:' + response.data)

        if (this.isExcelUrl(response.data)) {
          this.tapeData.excelurl = response.data
          this.$notify({
            title: '成功',
            message: '题库导入成功',
            type: 'success',
            duration: 2000
          })
        }else{
          this.$notify({
            title: '警告',
            message: '题库导入异常：'+response.data,
            type: 'warning',
            duration: 2000
          })
        }

      },


      handleDragover(e) {
        e.stopPropagation()
        e.preventDefault()
        e.dataTransfer.dropEffect = 'copy'
      },
      handleUpload() {

        this.tapeData.modifytime = parseTime(new Date())
        // this.$refs['excel-upload-input'].click()
        this.$refs['uploadExcel'].submit()
      },
      handleDownload() {

        let url = this.tapeData.excelurl
        console.log(' this.downloadExcel ==' + this.isExcelUrl(url))
        if (this.isExcelUrl(url)) {
          this.downloadExcel = this.tapeData.excelurl

        } else {
          this.$notify({
            title: '警告',
            message: '暂无可下载的资源',
            type: 'warning',
            duration: 2000
          })
        }
      },

      generateData({ header, results }) {
        this.excelData.header = header
        this.excelData.results = results
        this.onSuccess && this.onSuccess(this.excelData)
      },
      handleDrop(e) {
        e.stopPropagation()
        e.preventDefault()
        if (this.loading) return
        const files = e.dataTransfer.files
        if (files.length !== 1) {
          this.$message.error('Only support uploading one file!')
          return
        }
        const rawFile = files[0] // only use files[0]

        if (!this.isExcel(rawFile)) {
          this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
          return false
        }
        this.upload(rawFile)
        e.stopPropagation()
        e.preventDefault()
      },
      // handleClick(file, fileList) {
      //   console.log("file=="+JSON.stringify(file))
      handleClick(e) {
        const files = e.target.files
        const rawFile = files[0] // only use files[0]
        if (!rawFile) return
        // console.log("file=="+JSON.stringify(fileList[0]))
        this.upload(rawFile)

        // this.upload(fileList[0])
      },
      upload(rawFile) {
        this.$refs['excel-upload-input'].value = null // fix can't select the same excel
        if (!this.beforeUpload) {
          this.readerData(rawFile)
          return
        }
        const before = this.beforeUpload(rawFile)
        if (before) {
          this.readerData(rawFile)
        }
      },
      readerData(rawFile) {
        this.loading = true
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.onload = e => {
            const data = e.target.result
            const workbook = XLSX.read(data, { type: 'array' })
            const firstSheetName = workbook.SheetNames[0]
            const worksheet = workbook.Sheets[firstSheetName]
            const header = this.getHeaderRow(worksheet)
            const results = XLSX.utils.sheet_to_json(worksheet)
            this.generateData({ header, results })
            this.loading = false
            resolve()
          }
          reader.readAsArrayBuffer(rawFile)
        })
      },
      getHeaderRow(sheet) {
        const headers = []
        const range = XLSX.utils.decode_range(sheet['!ref'])
        let C
        const R = range.s.r
        /* start in the first row */
        for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
          const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
          /* find the cell in the first row */
          let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
          if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
          headers.push(hdr)
        }
        return headers
      },
      isExcel(file) {
        return /\.(xlsx|xls|csv)$/.test(file.name)
      },

      isExcelUrl(url) {
        return /\.(xlsx|xls|csv)$/.test(url)
      }

    }

  }
</script>

<style scoped>
  .excel-upload-input {
    display: none;
    z-index: -9999;
  }

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .drop {
    border: 2px dashed #bbb;
    width: 600px;
    height: 160px;
    line-height: 160px;
    margin: 0 auto;
    font-size: 24px;
    border-radius: 5px;
    text-align: center;
    color: #bbb;
    position: relative;
  }
</style>
